import React, { Component } from 'react'
import './class.less'
import { connect } from 'react-redux'
import action from '../../../store/action/index'
import { withRouter } from "react-router-dom"
class ClassIfy extends Component {
    state = {
        indexAll: 0,
        runIndex: 0
    }
    render() {
        let { indexAll, runIndex } = this.state
        console.log(this.props.shop.data);
        const navData = [
            { id: 1010, name: '好货推荐', state: '0' },
            { id: 1011, name: '牛肉', state: '1' },
            { id: 1012, name: '猪肉', state: '2' },
            { id: 1013, name: '羊肉', state: '3' }

        ]
        let data = this.props.shop.data.filter((item) => {
            if (navData[indexAll].state === '0') {
                return {
                    img: item.img,
                    name: item.name,
                    prioe: item.prioe,
                    id: item.id,
                    num: item.num,
                    sed: item.sed,
                    price: item.price,
                    state: item.state,
                    recommend: item.recommend,
                    label: item.label,
                    peopleNum: item.peopleNum,
                    detailsData: item.detailsData,
                }
            }
            if (navData[indexAll].state === item.state) {
                return {
                    img: item.img,
                    name: item.name,
                    prioe: item.prioe,
                    id: item.id,
                    num: item.num,
                    sed: item.sed,
                    price: item.price,
                    state: item.state,
                    recommend: item.recommend,
                    label: item.label,
                    peopleNum: item.peopleNum,
                    detailsData: item.detailsData,
                }
            }
        });

        let dataAll = data.map((item) => {
            return {
                img: item.img,
                name: item.name,
                prioe: item.prioe,
                id: item.id,
                num: item.num,
                sed: item.sed,
                price: item.price,
                state: item.state,
                recommend: item.recommend,
                label: item.label,
                peopleNum: item.peopleNum,
                detailsData: item.detailsData,
            }
        });

        // if (runIndex === 1) {
        //     dataAll.sort((x, y) => {
        //         return x.price - y.price
        //     })
        // }
        console.log(dataAll);
        let shop = (res) => {
            console.log(res);
        }
        return (
            <div className="bigBox">
                <div className="inpBox">
                    <span className="iconfont icon-fangdajing lens"></span>
                    <input type="text" className="inp" onClick={() => {
                        this.props.history.push({
                            pathname: "/SearchPage",
                            state: {

                                path: this.props.location.pathname
                            }
                        })
                    }} />
                </div>
                <div className="two">
                    <div className="left">
                        {
                            navData.map((item, index) => {
                                return <div key={index} onClick={() => {
                                    this.setState({ indexAll: index })
                                }} className={indexAll === index ? "nam active" : "nam"}>{item.name}</div>
                            })
                        }
                    </div>
                    <div className="rigth">
                        <div className="run">
                            <span onClick={() => { this.setState({ runIndex: 0 }) }} className={runIndex === 0 ? 'active' : ''}>新品特惠</span>
                            <span onClick={() => { this.setState({ runIndex: 1 }) }} className={runIndex === 1 ? 'active' : ''}>热销爆款</span>
                        </div>
                        {
                            dataAll.map((item, index) => {
                                return <div key={index} className='smallBox'>
                                    <div className="img">
                                        <img src={item.img} alt="" onClick={() => {
                                            this.props.history.push({
                                                pathname: "/ShopDetail",
                                                state: {
                                                    data: item,
                                                    pathname: this.props.location.pathname
                                                }
                                            })
                                        }} />
                                    </div>
                                    <div className="xpg">
                                        <p className="one">{item.name}</p>
                                        <p className="er">
                                            {
                                                JSON.parse(item.recommend).map((itm, i) => {
                                                    return <span key={i}>{itm}</span>
                                                })
                                            }
                                        </p>
                                        <p className="three">
                                            {
                                                JSON.parse(item.label).map((itm, i) => {
                                                    return <span key={i}>{itm}</span>
                                                })
                                            }
                                        </p>
                                        <p className="four">
                                            <span>￥{item.price}</span>/箱
                                            <i className="iconfont icon-gouwuche" onClick={() => {
                                                this.props.AddShopCar({
                                                    id: item.id,
                                                    img: item.detailsData.bannerList,
                                                    isCheck: false,
                                                    shopName: item.detailsData.shopName,
                                                    price: item.detailsData.price,
                                                    oldPrice: item.detailsData.prioe,
                                                    num: Number(item.num),
                                                    label: item.label
                                                })
                                            }}></i>
                                        </p>

                                    </div>
                                </div>
                            })
                        }

                    </div>
                </div>
            </div>
        )

    }
    componentDidMount() {
        this.props.getData()
    }
}
export default connect(state => state, action.shop)(withRouter(ClassIfy))